<template>
  <view class="terminalzcModifyMain">
    <view class="terminalzcModifyBox">
      <u-tabs-swiper
        ref="uTabs"
        height="60"
        :list="tabList"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        active-color="#fb4535"
        bar-height="8"
      ></u-tabs-swiper>
      <swiper
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
        class="swiperHeight"
      >
        <swiper-item class="swiper-item swiperItemHeight">
          <scroll-view scroll-y style="width: 100%">
            <view class="terminalzcModifyItem solid-top">
              <view class="title">输入机具号</view>
              <view class="inputBox">
                <u-form-item label="序列号" label-width="180rpx">
                  <u-input
                    placeholder="请输入机具序列号"
                    v-model="singleInputValue"
                  />
                </u-form-item>
              </view>
              <!-- <view class="inputItem">
                <u-form-item
                  label="当前政策"
                  label-width="200rpx"
                  right-icon="arrow-right"
                  @tap="classShow = true"
                >
                  <u-input
                    @tap="singleClassShow = true"
                    :disabled="true"
                    input-align="right"
                    v-model="singleValue.label"
                  />
                </u-form-item>
              </view> -->
              <u-button
                :ripple="true"
                @tap="nextStep('single')"
                class="rButton"
                type="primary"
                >下一步</u-button
              >
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item swiperItemHeight">
          <scroll-view scroll-y style="width: 100%">
            <view class="terminalzcModifyItem solid-top">
              <view class="title">输入机具号</view>
              <view class="inputBox">
                <u-form-item label="起始序列号" label-width="200rpx">
                  <u-input
                    placeholder="请输入机具序列号"
                    v-model="multipleInputValueStart"
                  />
                </u-form-item>
                <u-form-item label="截止序列号" label-width="200rpx">
                  <u-input
                    placeholder="请输入机具序列号"
                    v-model="multipleInputValueEnd"
                  />
                </u-form-item>
              </view>
              <!-- <view class="inputItem">
                <u-form-item
                  label="产品分类"
                  label-width="200rpx"
                  right-icon="arrow-right"
                >
                  <u-input
                    @tap="multipleClassShow = true"
                    :disabled="true"
                    input-align="right"
                    v-model="multipleValue.label"
                  />
                </u-form-item>
              </view> -->
              <u-button
                :ripple="true"
                @tap="nextStep('multiple')"
                class="rButton"
                type="primary"
                >下一步</u-button
              >
            </view></scroll-view
          >
        </swiper-item>
      </swiper>
    </view>
    <u-select
      v-model="singleClassShow"
      confirm-color="#fb4535"
      :list="classList"
      @confirm="singleProductConfirm"
    ></u-select>
    <u-select
      v-model="multipleClassShow"
      confirm-color="#fb4535"
      :list="classList"
      @confirm="multipleProductConfirm"
    ></u-select>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          name: "单个修改",
        },
        {
          name: "批量修改",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      //产品分类相关
      classList: [],
      singleClassShow: false,
      multipleClassShow: false,
      singleValue: {
        label: "",
        value: "",
      },
      multipleValue: {
        label: "",
        value: "",
      },
      //输入框相关
      singleInputValue: "",
      multipleInputValueStart: "",
      multipleInputValueEnd: "",
      //查询
      singlePorductValue: "",
      multiplePorductValue: "",
    };
  },
  onLoad() {
    // this.productClassList();
  },
  methods: {
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    //根据机具号查询分类
    singleGetClassByMachineCode() {
      this.$u.api
        .getClassByMachineCode({
          keyword: this.singleInputValue,
        })
        .then((res) => {
          if (res.status == 200) {
            this.singlePorductValue = res.result;
            this.$u.route({
              url: "/pages/zdzc/zdzc2",
              type: "redirect",
              params: {
                type: "single",
                singleInputValue: this.singleInputValue,
                productClassCode: this.singleValue.value,
                singlePorductValue: this.singlePorductValue,
              },
            });
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
            });
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    multipleGetClassByMachinesCode() {
      if (this.$u.trim(this.multipleInputValueStart, "all") == "") {
        this.$refs.uToast.show({
          title: "请输入起始机具号",
          type: "error",
        });
        return;
      }
      this.$u.api
        .getClassByMachinesCode({
          beginCode: this.multipleInputValueStart,
          endCode: this.multipleInputValueEnd,
        })
        .then((res) => {
          if (res.status == 200) {
            this.multiplePorductValue = res.result;
            this.$u.route({
              url: "/pages/zdzc/zdzc2",
              type: "redirect",
              params: {
                type: "multiple",
                multipleInputValueStart: this.multipleInputValueStart,
                multipleInputValueEnd: this.multipleInputValueEnd,
                productClassCode: this.singleValue.value,
                multiplePorductValue: this.multiplePorductValue,
              },
            });
          } else {
            if (this.$u.trim(this.multipleInputValueEnd, "all") != "") {
              this.$refs.uToast.show({
                title: res.msg,
                type: "error",
              });
            }
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    //请求方法
    productClassList() {
      this.$u.api
        .productClassList()
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            if (datas.length > 0) {
              this.classList = datas;
              this.singleValue = datas[0];
              this.multipleValue = datas[0];
            }
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    singleProductConfirm(e) {
      this.singleValue = e[0];
    },
    multipleProductConfirm(e) {
      this.multipleValue = e[0];
    },
    nextStep(type) {
      if (type == "single") {
        let singleInputValue = this.$u.trim(this.singleInputValue, "all");
        if (singleInputValue == "") {
          this.$refs.uToast.show({
            title: "请输入机具号",
            type: "error",
          });
          return;
        } else {
          this.singleGetClassByMachineCode();
        }
      } else if (type == "multiple") {
        let multipleInputValueStart = this.$u.trim(
          this.multipleInputValueStart,
          "all"
        );
        let multipleInputValueEnd = this.$u.trim(
          this.multipleInputValueEnd,
          "all"
        );
        if (multipleInputValueStart == "") {
          this.$refs.uToast.show({
            title: "请输入起始机具号",
            type: "error",
          });
          return;
        } else if (multipleInputValueEnd == "") {
          this.$refs.uToast.show({
            title: "请输入截止机具号",
            type: "error",
          });
          return;
        } else {
          this.multipleGetClassByMachinesCode();
        }
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.terminalzcModifyBox {
  padding-top: 20rpx;
  .terminalzcModifyItem {
    .title {
      font-size: 36rpx;
      font-weight: bold;
      padding-bottom: 20rpx;
    }
    padding: 50rpx 60rpx;
    .inputBox {
      input {
        background: #f1f1f1;
      }
    }
    .rButton {
      width: 80%;
      margin-top: 60rpx;
      background: #fb4535;
      height: 70rpx;
      line-height: 70rpx;
    }
  }
}
.swiperHeight {
  height: 900rpx !important;
}
.swiperItemHeight {
  height: 900rpx !important;
}
</style>